liankao/src/pages/ksfx/cjfx_cjd/[ykj_id].vue

<template>
  <div class="cjfx_cjd">
    <NavHeader />
    <bread-crumb />

    <div class="w-1200px m-auto flex flex-row justify-between">
      <div class="w-188">
        <leftSider :activeIndex="activeIndex" :ykjId="ykjId"  @parentClick="parentClick"/>
      </div>
      <div class="w-942 p-4 blueBg">
        <div class="flex items-center">
          <optionSelect  @optionClick="optionClick" />
        </div>
        <div class="mt-4 exportBtn">
          <el-button color="#003eee" type="primary" size="large" @click="exportBtn">导出</el-button>
        </div>

        <div class="h-218px mt-5px  bg-gray-500 py-4 pl-150px pr-100px perfectShow">
          <div class="h-full  flex justify-between" v-if="rangeData.length==0">
            <div class="h-full bg-opacity-20 rounded singlepart" v-for="(item, index) in rangeData" :key="index">
              <div class="h-1/3 text-center py-4  RankLabel">
                <img :src="'/images/one'+(index+1)+'.png'" alt="">
              </div>
              <div class="text-sm p-5px RankBaseInfo">
                <p class="h-1/4">考号：{{ item.kh }}</p>
                <p class="h-1/4">成绩：{{item.cj}}分</p>
                <p class="h-1/4">名次：{{ item.mc }}</p>
                <p class="h-1/4">学校：{{ item.xx }}</p>
              </div>
            </div>
          </div>
          <div class="text-center " style="line-height:218px;" v-else>
            暂无排名~
          </div>
        </div>

        <div class="h-auto mt-9px listMain" >
          <div class="h-74px flex flex-wrap flex-grow justify-between rounded px-4 listMain_title" >
            <div class="singleT" :class="{ 'h-full singleD': !!([1, 2, 3].indexOf(index) + 1) }">{{ listTitleShow.kh }}</div>
            <div class="singleT" :class="{ 'h-full singleD': !!([1, 2, 3].indexOf(index) + 1) }">{{ listTitleShow.xm }}</div>
            <div class="singleT" :class="{ 'h-full singleD': !!([1, 2, 3].indexOf(index) + 1) }">{{ listTitleShow.bj }}</div>

            <div class="h-full singleD" v-for="(secItem, secIndex) in listTitleShow.subInfo" :key="secIndex">
              <div class="h-1/2 text-center">{{ secItem.subTitle }}</div>
              <div class="h-1/2 flex flex-wrap flex-grow justify-between">
                <div class="secFullWidth">{{ secItem.fs }}</div>
                <div class="secFullWidth">{{ secItem.bp }}</div>
                <div class="secFullWidth">{{ secItem.np }}</div>
              </div>
            </div>

          </div>

          <div class="h-60px flex flex-wrap flex-grow justify-between px-4" :class="{ 'whiteBG': (index + 1) % 2 != 1 }"
            v-for="(item, index) in listShow" :key="index">

            <div class="singleTSec" :class="{ 'h-full singleDSec': !!([1, 2, 3].indexOf(index) + 1) }">{{ item.kh }}</div>
            <div class="singleTSec" :class="{ 'h-full singleDSec': !!([1, 2, 3].indexOf(index) + 1) }">{{ item.xm }}</div>
            <div class="singleTSec" :class="{ 'h-full singleDSec': !!([1, 2, 3].indexOf(index) + 1) }">{{ item.bj }}</div>
            <div class="h-full singleDSec" v-for="(secItem, secIndex) in item.subInfo" :key="secIndex">
              <div class="h-full flex flex-wrap flex-grow justify-between">
                <div class="secFullWidth">{{ secItem.fs }}</div>
                <div class="secFullWidth">{{ secItem.bp }}</div>
                <div class="secFullWidth">{{ secItem.np }}</div>
              </div>
            </div>

          </div>

        </div>


        <!-- 优化的图标结构 -->
        <el-table :data="tableMicData" border style="width: 100%">
        <el-table-column  prop="name"  align="center"  label="年级"> </el-table-column>
        <!-- 循环1级表头 -->
        <template v-for="(item, index) in tableMicTitle" :key="index">
          <el-table-column align="center"  :label="item" >
            <!-- 循环2级表头 -->
            <template   v-for="items in tableMicLabel"  :key="items.key">
              <el-table-column :label="items.label" width="100" align="center">
                <template v-for="(i,index) in items.type"  :key="index" slot-scope="scope">

                  <div>
                    {{ scope.row.type[index][items.key] }}
                  </div>
                </template>
              </el-table-column>
            </template>
          </el-table-column>
        </template>
      </el-table>


      </div>
    </div>

    <commonFooter />
  </div>
</template>
<route lang="json">
{
  "meta": {
    "title": "考试分析",
    "breadcrumb": true
  }
}
</route>
<script lang="ts" setup>
import {cjfx_cjd_list } from '../apiItem';
import {user} from "~/store";
const route = useRoute();



// 侧边栏点击
const activeIndex = ref('1-1');
let ykjId = ref();
const parentClick = (val: string) => {
  activeIndex.value = val;
  ykjId.value = route.params.ykj_id;
}

let rangeData =ref([])
let listTitleShow = ref({
  "kh": "考号",
  "xm": "姓名",
  "bj": "班级",
  "subInfo": [
    {
      "subTitle": "语文",
      "fs": "分数",
      "bp": "班排",
      "np": "年排",
    }
  ]
});
let listShow = ref([
  {
    "kh": "2345443211",
    "xm": "迪丽热巴",
    "bj": "初一（2）班",
    "subInfo": [
      {
        "subTitle": "语文",
        "fs": "87.45",
        "bp": "1",
        "np": "1",
      }

    ]
  },
]);


ykjId.value = route.params.ykj_id;

const tableMicTitle = ref();
const tableMicLabel=ref([
  {
    label: "R%",
    key: "mgan",
  },
  {
    label: "S%",
    key: "naiyao",
  },
  {
    label: "I%",
    key: "zjie",
  },
]);
const tableMicData = ref(
  [{
    name: "asd",
    type: [
      { tab: "肺炎克雷伯", mgan: "1", naiyao: "2", zjie: "3" },
      { tab: "铜绿假", mgan: "4", naiyao: "5", zjie: "6" },
      { tab: "鲍式不动杆菌", mgan: "9", naiyao: "8", zjie: "7" },
    ],
  },
  {
    name: "asd2",
    type: [
      { tab: "肺炎克雷伯", mgan: "11", naiyao: "12", zjie: "13" },
      { tab: "铜绿假", mgan: "21", naiyao: "22", zjie: "23" },
      { tab: "鲍式不动杆菌", mgan: "1", naiyao: "2", zjie: "33" },
    ],
    }]
);

onMounted(() => {
  initData();

  //循环+去重
  aa();

})
const aa = () => {
  let tableMicTitle_temp: Iterable<any>|null|undefined = [];
  tableMicData.value.forEach(o=>{
    o.type.forEach(item => {
      tableMicTitle_temp.push(item.tab)
     })
  })
  tableMicTitle.value = [...new Set(tableMicTitle_temp)]
}


const school_id = ref("");
const grade_id = ref("");
const xueke_id = ref("");

// 初始化数据
const initData =() => {
  let transObj = {
    school_id:school_id.value,
    cm_id: grade_id.value,
    xueke_id: xueke_id.value,
    jh_id:route.params.ykj_id,//考试计划id
  }
  cjfx_cjd_list(transObj)
    .then(res => {
      if (res.code == "1") {
        listTitleShow.value = res.data.data.listTitleShow;
        listShow.value = res.data.data.listShow;
        rangeData.value = res.data.data.rangeData;
      }
    })
  .catch(error=>{console.log(error)})
}

//option筛选
const optionClick = (val: any, marke: any) => {

  if (marke == "scholl") {
    school_id.value = val;
  } else if (marke == "grade") {
    grade_id.value = val;
  } else {
    xueke_id.value = val;
  }
  initData();
}

//导出
const exportBtn = () => {
  let prefixedUrl = window.GLOBAL_CONFIG.web_pc;
  let fullUrl = prefixedUrl + '/openapi/echart/transcript.php?api=xls&token=' + user.value.token;
  window.open(fullUrl,'_blank')
}
</script>

<style lang="scss" scoped>

::v-deep .el-sub-menu__title {
  background: #003eee;
  color: #fff;
}

.blueBg {
  background: #F1F7FF;
}

.whiteBG {
  background: #fff;
}

.singlepart {
  background-color: rgba($color: #ffffff, $alpha: 0.2);
  color: #fff;
}

.listMain {
  max-height: 600px;
  overflow: auto;
}

.listMain_title {
  font-size: 16px;
  color: #fff;
  background: #003eee;
  overflow-y: auto;
}

.singleT {
  // flex: 1;
  // width: fit-content;
  line-height: 74px;
  width:100px;
  text-align: center;
}

.singleD {
  // flex: 1;
  width:100px;
}

.singleTSec {
  // width: fit-content;
  // flex: 1;
  width:100px;
  line-height: 60px;
  text-align: center;
}

.singleDSec {
  // flex: 1;
  line-height: 60px;
  width:200px;
}

.secFullWidth {
  width: fit-content;
  flex: 1;
  text-align: center;
}
.perfectShow{
  background: url("/images/big_bg.png") no-repeat left top;
  background-size:cover;
}
.RankLabel{
  text-align: center;
  img{
    display: inline-block;
    width: 30%;
  }
}
</style>